<template>
  <div class="info">
    <logo></logo>
    <!-- tab板块 -->
    <van-tabs v-model="active" swipeable animated @click="handlerClickTab">
      <!-- start 操作记录 -->
      <van-tab title="操作记录">
        <div class="tab1-title">
          <ul class="flex">
            <li>标题</li>
            <li>操作员</li>
            <li>时间</li>
          </ul>
        </div>
        <div v-if="operation.length == 0 ">暂无数据</div>
        <div v-else class="operation">
          <ul>
            <li v-for="(item,index) in operation" :key="index">
              <span>{{item.Title}}</span>
              <span>{{item.CreateUserName}}</span>
              <span>{{item.CreateTime}}</span>
            </li>
          </ul>
        </div>
      </van-tab>
      <!-- end 操作记录 -->

      <van-tab title="任务">
        <div class="task">
          <ul v-for="item in tasklist" :key="item.MissionId">
            <li class="flex">
              <p>{{item.Title}}</p>
              <p>{{item.TypeName}}</p>
              <p>{{item.ImplementStatusName}}</p>
              <p>{{item.CreateTimeStr}}</p>
            </li>
          </ul>

          <!-- <table class="table table-bordered table-hover">
            <tbody class="mt-3" v-for="item in tasklist" :key="item.Id">
              <tr>
                <td>{{item.RecordCount}}</td>
                <td colspan="2" style="text-align: left">{{item.Title}}</td>
              </tr>
              <tr>
                <td>{{item.EmergencyLevelName}}</td>
                <td>{{item.ImplementStatusName}}</td>
                <td>{{item.RequireCompleteTimeStr}}</td>
              </tr>
            </tbody>
          </table>-->
        </div>
      </van-tab>

      <van-tab title="种植管理">
        <div class="tab1-title tab2-title">
          <ul class="flex">
            <li>描述</li>
            <!-- <li>时间</li> -->
            <li>时间</li>
          </ul>
        </div>
        <div v-if="plantingManagementList.length == 0 ">暂无数据</div>
        <div v-else class="operation">
          <ul>
            <li v-for="(item,index) in plantingManagementList" :key="index">
              <span>{{item.Name}}</span>
              <span>{{item.CreatedTime}}</span>
              <!-- <span>{{item.CreateTime}}</span> -->
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <tabbar></tabbar>
  </div>
</template>




<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
// 导入通信js
var signalR = require('@/assets/js/signalr.js')
export default {
  name: 'info',
  components: {
    logo,
    tabbar
  },

  data() {
    return {
      active: 0,
      operation: [], // 操作记录
      tasklist: [], // 任务
      plantingManagementList: [] // 种植任务
    }
  },
  created() {},
  mounted() {
    this.operationRecord() // 操作记录;
  },
  methods: {
    /* 操作记录 */
    async operationRecord() {
      const { data: res } = await this.$http.post(`ControllerRecord/GetControllerRecordOutputListByShed`, {
        id: 'ddef2c8b-f434-4fc4-a3a5-db8ecfe35ef1'
      })
      this.operation = res
      console.log(this.operation)
    },
    // 点击tab，index = 1的时候，就刷新操作记录
    handlerClickTab(index) {
      console.log(index)
      if (index == 0) this.operationRecord()
      if (index == 1) this.task()
      if (index == 2) this.plantingManagement()
    },

    /* 任务 */
    async task() {
      const { data: res } = await this.$http.post(`Mission/GetMissionListByAreaId`, {
        id: 'ddef2c8b-f434-4fc4-a3a5-db8ecfe35ef1'
      })
      this.tasklist = res
      console.log(this.tasklist)
    },

    /* content: 种植任务
     * @Author: itwangyang
     * @Date: 2020-03-10 16:29:34
     * @Last Modified by: mikey.zhaopeng
     * @Last Modified time: 2020-03-10 16:58:36
     */
    async plantingManagement() {
      const { data: res } = await this.$http.post(`Plantings/GetPlantingByShed`, {
        id: 'ddef2c8b-f434-4fc4-a3a5-db8ecfe35ef1',
        type: 14
      })
      this.taskplantingManagementListlist = res
      console.log(this.plantingManagementList)
    }

    // async handlerClickTab2(name) {
    //   console.log(name)
    //   if (name === 1) {
    //     const { data: res } = await this.$http.post(`Mission/GetMissionList`, {
    //       Sort: 'desc',
    //       TypeName: '种植',
    //       limit: 3,
    //       page: 1,
    //       sidx: 'M.CreateTime',
    //       ImplementStatus: -1,
    //       ReceiveUser: '00000000-0000-0000-0000-000000000000',
    //       SendUser: '00000000-0000-0000-0000-000000000000',
    //       AreaId: '622ad4a7-fc01-4ff8-8069-3e591b120773',
    //       type: 1
    //     })
    //     console.log(res.data)
    //     this.tasklist = res.data
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
#demo1 {
  box-sizing: border-box;
}
.tab1-title {
  ul {
    padding-left: 4rem;
    font-size: 14px;
    font-weight: bold;
    margin-top: 1rem;
    li:nth-child(1) {
      padding-left: 1rem;
    }
    li:nth-child(2) {
      padding-left: 5rem;
    }
    li:nth-child(3) {
      padding-left: 5.5rem;
    }
  }
}
.tab2-title {
  li:nth-child(1) {
    padding-left: 0rem !important;
  }
  li:nth-child(2) {
    padding-left: 5.5rem !important;
  }
  li:nth-child(3) {
    padding-left: 7.5rem !important;
  }
}

.table-bordered {
  border: 1px solid #d4d4d4;
  border-collapse: collapse;
  border-collapse: collapse;
  width: 96%;
  box-sizing: border-box;
  border-spacing: 0;
  margin: 10px auto;
  td {
    border: 1px solid #d4d4d4;
    padding: 5px;
    font-size: 0.8rem;
  }
}

.operation li {
  min-width: 33.3%;
  font-size: 0.8rem;
  padding: 1rem;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  span:nth-child(1) {
    // width: 200px;
    width: 11rem;
    text-align: center;
  }
  span:nth-child(2) {
    // width: 100px;
    width: 6rem;
  }
  span:nth-child(3) {
    // width: 150px;
    width: 9rem;
  }
}
.task {
  ul {
    li {
      width: 100%;
      font-size: 0.8rem;
      padding: 0 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      box-sizing: border-box;
      p {
        display: block;
        text-align: left;
      }
      p:nth-child(1) {
        width: 35%;
      }
      p:nth-child(2) {
        width: 20%;
      }
      p:nth-child(3) {
        width: 20%;
      }
      p:nth-child(4) {
        width: 25%;
      }
    }
  }
}

@media (max-width: 413px) and (min-width: 374px) {
  .tab1-title ul {
    padding-left: 3rem;
  }
  .operation li {
    min-width: 33.3%;
    font-size: 0.8rem;
    padding: 1rem;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    span:nth-child(1) {
      // width: 200px;
      width: 11rem;
      text-align: center;
    }
    span:nth-child(2) {
      // width: 100px;
      width: 6rem;
    }
    span:nth-child(3) {
      width: 10rem;
    }
  }
}
</style>